<template>
  <ele-page>
    <!-- 搜索表单 -->
    <PageSearch @search="reload" />
    <ele-card :body-style="{ paddingTop: '8px' }">
      <!-- 数据表格 -->
      <ele-pro-table
        ref="tableRef"
        row-key="id"
        :columns="columns"
        :datasource="datasource"
        :show-overflow-tooltip="true"
        highlight-current-row
        cache-key="systemLoginlogTable"
      >
        <!-- 表头工具栏 -->
        <template #toolbar>
        </template>
        <!-- 操作类型列 -->
        <template #type="{ row }">
          <el-tag
            :type="['success', 'danger', 'info'][row.type - 1]"
            size="small"
          >
            {{ ['登录系统', '注销系统', '操作日志'][row.type - 1] }}
          </el-tag>
        </template>
        <!-- 操作状态列 -->
        <template #status="{ row }">
          <ele-dot
            :type="['', 'success'][row.status]"
            :ripple="row.status === 0"
            :text="['操作成功', '操作失败'][row.status]"
          />
        </template>
        <!-- 操作列 -->
        <template #action="{ row }">
          <el-popconfirm
            class="ele-action"
            title="确定要删除此登录日志吗？"
            @confirm="remove(row)"
          >
            <template #reference>
              <el-link
                type="danger"
                underline="never"
              >
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </template>
      </ele-pro-table>
    </ele-card>
  </ele-page>
</template>

<script setup>
import { formatDate, Http } from '@/utils/index'

import PageSearch from './components/search.vue'

/** 表格实例 */
const tableRef = ref(null)

const columns = [
  {
    type: 'index',
    label: '序号',
    fixed: 'left',
    width: 60,
  },
  {
    prop: 'username',
    label: '操作账号',
    minWidth: 120,
  },
  {
    prop: 'method',
    label: '请求方法',
    minWidth: 100,
  },
  {
    prop: 'module',
    label: '操作模块',
    minWidth: 100,
  },
  {
    prop: 'param',
    label: '请求参数',
    minWidth: 160,
  },
  {
    prop: 'url',
    label: '请求地址',
    minWidth: 160,
  },
  {
    prop: 'ip',
    label: 'IP地址',
    minWidth: 120,
  },
  // {
  //   prop: 'ip_city',
  //   label: 'IP所属地',
  //   minWidth: 120,
  // },
  {
    prop: 'os',
    label: '操作系统',
    minWidth: 100,
  },
  {
    prop: 'browser',
    label: '浏览器',
    minWidth: 100,
  },
  {
    prop: 'type',
    label: '操作类型',
    minWidth: 100,
    slot: 'type',
  },
  {
    prop: 'create_time',
    label: '操作时间',
    sortable: 'custom',
    width: 160,
    showOverflowTooltip: false,
    formatter: row => formatDate(row.create_time),
  },
  // {
  //   columnKey: 'action',
  //   label: '操作',
  //   width: 80,
  //   slot: 'action',
  //   align: 'right',
  //   fixed: 'right',
  // },
]
/** 表格数据源 */
function datasource({ page, limit, where, orders }) {
  return Http.get('/loginlog/index', { ...where, ...orders, page, limit })
}

/** 搜索 */
function reload(where) {
  tableRef.value?.reload?.({ page: 1, where })
}
/* 删除 */
// function remove() {
// }
</script>

<style scoped></style>
